<template>
<div>
  <el-table :data="fileList">
    <el-table-column label="文件名称" align="center" prop="fileName" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">
      <template slot-scope="scope">
        <el-button size="mini" type="text" icon="el-icon-view"
                   @click.stop="handleView(scope.row)" title="查看"></el-button>
        <el-button size="mini" type="text" icon="el-icon-download"
                   @click="handleDownload(scope.row.url, scope.row.fileName)" title="下载"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog :visible.sync="dialogVisible" append-to-body>
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  <el-dialog :visible.sync="dialogVisiblePdf" append-to-body>
    <pdf v-for="item in pageTotal" :src="pdfUrl" :key="item" :page="item"></pdf>
  </el-dialog>
</div>
</template>
<script >
import { download } from "@/utils/request";
import { queryFile, fileRemove } from "@/api/system/file";
import pdf from "vue-pdf";
export default {
  name:"UploadFile",
  props: {
    uploadId:{
      type:String,
      default:null
    },
    businessCode:{
      type:String,
      default: null
    }
  },
  components:{pdf},
  data(){
    return{
      dialogVisible:false,
      dialogImageUrl:'',
      dialogVisiblePdf:false,
      pdfUrl:'',
      pageTotal: null,
      fileList:[]
    }
  },
  created() {
    this.queryFile(this.uploadId);
  },
  methods:{
    handleDownload(fileUrl, fileName) {
      let params = {
        resource: fileUrl
      }
      console.log(fileUrl)
      console.log(fileName)
      download("/common/download/resource", params, fileName);
    },
    queryFile(id){
      console.log(id)
      queryFile(id, this.businessCode).then(response => {
        console.log('File List Response:', response);
        this.fileList = response.data;
      }).catch(error => {
        console.error('Error fetching file list:', error);
      });
    },
    handleView(row) {
      if (row.url != null && row.url != '' && (row.url).indexOf('.pdf') !== -1) {
        console.log("是否为pdf")
        this.handlePictureCardPreviewPdf(row.url);
      } else {
        this.handlePictureCardPreview(row.url);
      }
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    handlePictureCardPreviewPdf(url) {
      this.pdfUrl = pdf.createLoadingTask(url)
      // 获取页码
      this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {
      })
      this.dialogImageUrlPdf = url;
      this.dialogVisiblePdf = true;
    },
  }
}
</script>
<style scoped lang="scss">

</style>
